{% extends "账号管理/template.html" %}
{% block title %}首页{% endblock %}
{% block css %}

<style>
    .AccountAdminIcon {
        width: 32px;
        height: 32px;
    }

    /* 鼠标经过出现下划线 */
    .Yy-hover-underline:hover {
        text-decoration: underline;
    }
</style>

{% endblock %}
{% block body %}

<div class="layui-btn-container Yy-mt-12px">
    <a href="/web/account_admin/account_admin_add/" class="layui-btn layui-bg-blue"> <i
            class="layui-icon layui-icon-add-1"></i> 添加账号</a>


</div>
<div class="layui-form  Yy-d-flex Yy-ju-cen">

    <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
            <li class="layui-this">用户名查询</li>
            <li>账号查询</li>
            <li>平台查询</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="layui-input-group ">
                    <input type="text" placeholder="请输入" class="layui-input">
                    <div lay-on="search" data-Select_Type="2"
                        class="layui-input-split layui-input-suffix Yy-cursor-pointer">
                        <i class="layui-icon layui-icon-search"></i>
                    </div>
                </div>
            </div>
            <div class="layui-tab-item">
                <div class="layui-input-group ">
                    <input type="text" placeholder="请输入" class="layui-input">
                    <div lay-on="search" data-Select_Type="1"
                        class="layui-input-split layui-input-suffix Yy-cursor-pointer">
                        <i class="layui-icon layui-icon-search"></i>
                    </div>
                </div>
            </div>
            <div class="layui-tab-item">
                <div class="layui-input-group ">
                    <input type="text" placeholder="请输入" class="layui-input">
                    <div lay-on="search" data-Select_Type="3"
                        class="layui-input-split layui-input-suffix Yy-cursor-pointer">
                        <i class="layui-icon layui-icon-search"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>




</div>




<table class="layui-table Yy-mt-12px" lay-even>

    <thead>
        <tr>
            <th>ID</th>
            <th>用户名</th>
            <th>账号</th>
            <th>密码</th>
            <th>手机号</th>
            <th>邮箱</th>
            <th>平台名称</th>
            <th>平台链接</th>
            <th>平台图标</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>


        {% for obj in account_admin_list %}
        <tr>
            <td class="id">{{ obj.id }}</td>
            <td class="user_name">{{ obj.user_name }}</td>
            <td class="user_account">{{ obj.user_account }}</td>
            <td class="user_password">{{ obj.user_password }}</td>
            <td class="user_phone">{{ obj.user_phone }}</td>
            <td class="user_email">{{ obj.user_email }}</td>
            <td class="platform_name">{{ obj.platform_name }}</td>
            <td><a class="platform_url Yy-hover-underline" href="{{ obj.platform_url }}" target="_blank"> 点我跳转 </a></td>
            <td><img lay-on="photots" class="AccountAdminIcon Yy-cursor-pointer platform_icon"
                    src="{{ obj.platform_icon }}" alt="{{ obj.platform_name }}" srcset="">
            </td>
            <td>
                <a href="/web/account_admin/account_admin_edit/{{obj.id}}/"
                    class="layui-btn layui-btn-sm layui-btn-primary">
                    <i class="layui-icon layui-icon-edit"></i>
                </a>
                <button lay-on="delete1" type="button" class="layui-btn layui-btn-sm layui-btn-primary">
                    <i class="layui-icon layui-icon-delete"></i>
                </button>
            </td>
        </tr>
        {% endfor %}

    </tbody>

</table>
{% include "云商/include/footer.html" %}
{% endblock %}
{% block js %}

<script>
    layui.use(function () {
        var layer = layui.layer;
        var util = layui.util;
     
        // 批量事件
        util.on('lay-on', {
            search: (e) => {
                const select_type = e[0].dataset.select_type;
                const user_value = e[0].parentNode.querySelectorAll('input')[0].value;
                YyGo(`/web/account_admin/index/?Select_Type=${select_type}&select_params=${user_value}`)

            },
            delete1: function (e) {
                const user_name = e[0].parentNode.parentNode.querySelectorAll('.user_name')[0].innerHTML;
                layer.confirm(`确定删除 <s class="layui-font-red layui-font-18">${user_name}</s> 吗, 该操作不可撤销？`, {
                    btn: ['确定', '关闭'] //按钮
                }, function () {
                    YyAxios({
                        "url": '/api/account_admin/delete_account/',
                        "method": 'POST',
                        "data": {
                            "user_id": e[0].parentNode.parentNode.querySelectorAll('.id')[0].innerHTML
                        }
                    }).then(res => {
                        layer.msg('删除成功(网页将于2秒钟重新刷新)', { icon: 1, time: 1200 });
                        setTimeout(() => {
                            YyRefresh();
                        }, 1200);
                    }).catch(err => {
                        console.log(err);
                    })

                });
            },
            photots: function (e) {

                layer.photos({
                    photos: {
                        "title": "Photos Demo",
                        "start": 0,
                        "data": [
                            {
                                "alt": e[0].alt,
                                "pid": 1,
                                "src": e[0].src,
                            }
                        ]
                    }
                });
            }
        });
    });
</script>

{% endblock %}